<%--
  Created by IntelliJ IDEA.
  User: 26423
  Date: 2021/6/18
  Time: 15:58
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>购物车的实现</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    <script src="./js/index.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        #top{

            height: 50px;
            width: 100%;
            margin: 0 0;

        }
        .top2{
            float: right;
        }
        nav{
            font-size:20px;
            float:initial;
            margin: 0 0 0 0;
            padding: 0 0 0 0 ;
        }
        nav ul li {
            float:left;
            display: inline;
        }
        nav ul li a {
            float: left;

            padding: 11px 20px;
            font-size: 14px;
            text-align: center;
            text-decoration: none;
            background: url(image/11.jpg)
            center left  no-repeat;
            color: #fff;
            outline: none;
        }
    </style>
    <script>
        initShopCar(`${userInfo.username}`)
    </script>
</head>
<body ng-app>
<body background="image/shoppingcar2.jpg"
      style="background-repeat:no-repeat ;
       background-size:100% 100%;
       background-attachment: fixed;">
</body>
<%@include file="webdaohanglan.jsp"%>
<div id="top">
    <c:if test="${userInfo != null}">
        <a href="/user?type=userInfo&username=${userInfo.username}"><img src="${userInfo.touxiang}" height="35px" width="35px"></a>
        <a href="/user?type=userInfo&username=${userInfo.username}">

            <c:if test="${userInfo.trueName != null}">
                ${userInfo.trueName}
            </c:if>
            <c:if test="${userInfo.trueName == null}">
                ${userInfo.username}
            </c:if>

        </a>
    </c:if>
    <c:if test="${userInfo == null}">
        <a href="#"><img src="aaa/geren1.jpg" height="35px" width="35px"></a>
        <a href="login.jsp">还没有登录？点此登录</a>
    </c:if>

</div>

<div style="margin-left:700px; width:100%; padding-top:30px; color: black;">
    <!-- <input  type="text" name="" value=""  ng-model="abc" placeholder="输入关键字快速查找">{{abc}} -->
    <h1>购物车</h1>
</div>

<div ng-controller="cartController" class="container">
    <table class="table" ng-show="cart.length">
        <thead>
        <tr>
            <th>产品编号</th>
            <th>产品名字</th>
            <th>购买数量</th>
            <th>产品单价</th>
            <th>产品总价</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in cart| filter:abc">
            <td ng-bind="item.id"></td>
            <td ng-bind="item.bookName"></td>
            <td>
                <button type="button" ng-click="reduce(item.id)" class="btn btn-primary btn-sm">-</button>
                <input type="text" ng-model="item.number" style="text-align: center;">
                <button type="button" ng-click="add(item.id)" class="btn btn-primary btn-sm">+</button>
            </td>
            <td ng-bind="item.bookPrice"></td>
<%--            <td ng-bind="item.bookPrice*item.number"></td>--%>
            <td ng-bind="item.money"></td>
            <td><button type="button" ng-click="remove(item.id)" class="btn btn-danger btn-sm">移除</button></td>
        </tr>
        <tr>
            <td>总购物价</td>
            <td ng-bind="totalbookPrice()"></td>
            <td>总购买数量</td>
            <td ng-bind="totalnumber()"></td>
            <td colspan="2"><button type="button"  ng-click="cart = {}" class="btn btn-danger btn-sm">清空购物车</button></td>
            <td colspan="2"><button type="button" class="btn btn-danger btn-sm" id="jiesuan" onclick="onSubmitShop(`${userInfo.username}`)">结算</button></td>
            <script>

            </script>
        </tr>
        </tbody>
    </table>
    <p ng-show="!cart.length">您的购物车已空</p>
</div>
</body>
</html>
